<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        // 箭头函数的使用 

        // 1.普通函数改造 
        // ES5 定义函数 
        // var fn = function(){
        //     console.log("fn");
        // }

        // ES6的箭头函数 
        // 
        // let fn = ()=>{
        //     console.log("fn");
        // }

        // fn();


        // 2.有参数的函数改造 

        // ES5
        // var fn = function(v){
        //     console.log(v);
        // }

        // ES6
        // 箭头函数里 参数如果是一个 ，那么小括号可以不写；
        // let fn = v=>{
        //     console.log(v);
        // }
        // fn(1)

        // 如果是多个 参数 或者没有参数 ，那么 小括号一定要写 ；
        // var fn = (a,b)=>{
        //     console.log(a,b);
        // }
        // fn(1,2);


        // 3.有返还值的函数改造 
        // ES5;
        // var fn = function(v){
        //     return v;
        // }

        // ES6 ： 
        // 方式一：
        // var fn = v=>{
        //     return v;
        // }
        // console.log(fn(10));

        // 方式二 ： 箭头函数的箭头隐式返还后面的内容
        // 如果有大括号 不会自动return ，如果没有大括号 箭头会自动return
        // var fn = v=>v;
        // console.log(fn(2));

        // var fn = ()=>{
        //     return {
        //         name:"张三",
        //         age:20
        //     }
        // }
        // 遇到有歧义的位置 加上小括号包裹就可以了；
        // var fn = ()=> ({name:"张三",age:20});

        // console.log(fn());


        // 4.回调函数里使用 箭头函数
        // 定时器 
        // setTimeout(()=>{
        //     console.log("hello");
        // }, 2000);

        // document.querySelector("button").onclick = function(){
        //     console.log("点击了");
        // }

        // document.querySelector("button").onclick = ()=>{
        //     console.log("点击了");
        // }

        // map  filter  every ....
        var users = [
            {
                name:"张三",
                age:23,
                gender:"男"
            },
            {
                name:"李四",
                age:21,
                gender:"男"

            },
            {
                name:"王五",
                gender:"男",
                age:20
            },
            {
                name:"王五33",
                gender:"男",
                age:24
            },{
                name:"王五44",
                gender:"女",
                age:20
            }
        ]

        // var res1 =    users.filter(function(item){
        //     return item.gender === "男";
        // })
        // console.log(res1);
        // // 获取男性中年龄大于20的人员
        // var res2 = res1.filter(function(item){
        //     return item.age>20;
        // })


        // 简化一：
        // var res = users.filter(function(item){
        //     return item.gender === "男";
        // }).filter(function(item){
        //     return item.age>20;
        // })
        // console.log(res);

        //简化二： 简化成箭头函数

        var res = users.filter(item=>item.gender === "男").filter(item=>item.age>20);
        console.log(res);

        // 作业 ：员工列表 和 百度音乐全选 改成  ES6 箭头函数 let 和const
        // 响应式换成proxy
    </script>
</body>
</html>